<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="robots" content="index,follow" /> 
    <title>Demo | jQuery.popeye 2.0 | an inline lightbox alternative</title>
    
    <link rel="stylesheet" type="text/css" href="css/site/site.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/popeye/jquery.popeye.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/popeye/jquery.popeye.style.css" media="screen" />
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="lib/popeye/jquery.popeye-2.0.4.min.js"></script>

</head>
<body>
<div id="page-margins">
  <div class="example">
    <div class="ppy" id="ppy3">
            <ul class="ppy-imglist">
                <li><a href="http://farm4.static.flickr.com/3142/3053892214_390c0365df.jpg"><img src="http://farm4.static.flickr.com/3142/3053892214_390c0365df_m.jpg" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras euismod risus non diam." /></a></li>
                <li><a href="http://farm4.static.flickr.com/3014/3053902638_7871e32230.jpg"><img src="http://farm4.static.flickr.com/3014/3053902638_7871e32230_m.jpg" alt="In tempus consequat purus. Curabitur in massa nec purus semper adipiscing. Donec convallis odio nec nibh. Nam viverra, tortor nec cursus accumsan, purus purus ultricies mauris, in dignissim orci dui at est. Morbi non quam at ante cursus posuere. Sed ornare sem vitae diam tempor blandit. Nam risus diam, faucibus eget, fermentum et, dignissim eu, tellus. Praesent non justo. Proin vestibulum diam at mi. Cras molestie eleifend mi. Morbi massa enim, auctor at, rhoncus nec, consequat nec, diam. In laoreet lacus vel velit. Sed vulputate commodo ligula." /></a></li>
                <li><a href="http://farm4.static.flickr.com/3136/3053075339_ca3f303a6d.jpg"><img src="http://farm4.static.flickr.com/3136/3053075339_ca3f303a6d_m.jpg" alt="Sed consequat tincidunt sapien." /></a></li>
                <li><a href="http://farm4.static.flickr.com/3234/3053054359_090927b527.jpg"><img src="http://farm4.static.flickr.com/3234/3053054359_090927b527_m.jpg" alt="Proin aliquam libero ac lectus. Sed consequat tincidunt sapien. Suspendisse hendrerit porta ante. Proin aliquam libero ac lectus. Sed consequat tincidunt sapien. Suspendisse hendrerit porta ante." /></a></li>
                <li><a href="http://farm4.static.flickr.com/3161/3053878060_16a1ed4786.jpg"><img src="http://farm4.static.flickr.com/3161/3053878060_16a1ed4786_m.jpg" alt="Aenean tristique pellentesque quam. Proin aliquam libero ac lectus." /></a></li>
                <li><a href="http://farm4.static.flickr.com/3247/3053897646_df5b74c794.jpg"><img src="http://farm4.static.flickr.com/3247/3053897646_df5b74c794_m.jpg" alt="" /></a></li>
                <li><a href="http://farm4.static.flickr.com/3225/3053039525_2d3ef0c58e.jpg"><img src="http://farm4.static.flickr.com/3225/3053039525_2d3ef0c58e_m.jpg" alt="Suspendisse hendrerit porta ante." /></a></li>
            </ul>
            <div class="ppy-outer">
                <div class="ppy-stage">
                    <div class="ppy-nav">
                        <div class="nav-wrap">
                            <a class="ppy-prev" title="Previous image">Previous image</a>
                            <a class="ppy-switch-enlarge" title="Enlarge">Enlarge</a>
                            <a class="ppy-switch-compact" title="Close">Close</a>
                            <a class="ppy-next" title="Next image">Next image</a>
                        </div>
                    </div>
                    <div class="ppy-counter">
                        <strong class="ppy-current"></strong> / <strong class="ppy-total"></strong> 
                    </div>
                </div>
                <div class="ppy-caption">
                    <span class="ppy-text"></span>
                </div>
            </div>
        </div>
        
        <h2>&nbsp;</h2>
    
    <!-- 
        |
        | BEGIN Donate
        |
        |
         --></div>
</div>


<!-- [example js] begin -->
<script type="text/javascript">
    <!--//<![CDATA[
    
    $(document).ready(function () {
        var options2 = {
            caption:    false,
            navigation: 'permanent',
            direction:  'left'
        }
        var options3 = {
            caption:    'permanent',
            opacity:    1
        }
    
        $('#ppy1').popeye();
        $('#ppy2').popeye(options2);
        $('#ppy3').popeye(options3);
    });
    
    //]]>-->
</script>
<!-- [example js] end -->

</body>
</html>    